<template>
  <!-- 歌手专用 -->
  <ul class="singerBox">
    <router-link
      tag="li"
      :to="{ name: 'singerdetail', query: { id: item.id, name: item.name } }"
      class="singerItem"
      v-for="item in content"
      :key="item.id"
    >
      <img class="singerPicUrl" :src="item.img1v1Url" alt="" />
      <p class="singerName">
        <span>{{ item.name }}</span> <i></i>
      </p>
    </router-link>
  </ul>
</template>

<script>
export default {
  props: {
    content: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style lang="scss" scoped>
.singerBox {
  margin: 0 0 0 -24px;
  .singerItem {
    width: 130px;
    padding: 0 0 30px 23px;
    display: inline-block;
    .singerPicUrl {
      width: 130px;
      height: 130px;
    }
    .singerName {
      margin-top: 8px;
      span {
        max-width: 105px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      i {
        background-image: url("./../../assets/imges/btnIconTwo.png");
        width: 17px;
        height: 18px;
        background-position: 0 -740px;
        vertical-align: middle;
        float: right;
      }
    }
  }
}
</style>